<script setup>
  // 刮刮乐cavas
  import {onMounted} from "vue";
  let isTouch = false;
  let touchStart = null;
  function draw(id) {
    let canvas = document.getElementById(id);
    let cw = canvas.width;
    let ch = canvas.height;
    let ctx = canvas.getContext('2d');
    if (ctx){
      ctx.fillStyle = '#ccc';
      ctx.fillRect(0, 0, cw, ch);
    }
    // canvas.addEventListener('touchstart',function (e) {
    //   isTouch = true;
    //   touchStart.x = e.clientX;
    //   touchStart.y = e.clientY;
    // })
    canvas.addEventListener('touchend',function (e) {
      isTouch = false;
    })
    canvas.addEventListener('touchmove',function (e) {
      if(isTouch){
        alert(JSON.stringify(e.changedTouches))
        ctx.clearRect(e.clientX,e.clientY,20,20)
      }
    },false)
  }
  function tstart(e) {
    isTouch = true;
    alert(JSON.stringify(e))
    // touchStart.x = e.clientX;
    // touchStart.y = e.clientY;
  }
  onMounted(()=>{
    // 执行事件
    draw('canvas')
  })

</script>

<template>


  <div class="ggl-main">
    <canvas class="canvas" @touchstart="tstart($event)" id="canvas"></canvas>
    <div class="content">456789</div>
  </div>

</template>

<style scoped lang="scss">
.ggl-main{
  position: relative;
  border: 2px solid #f1f1f1;
  width: 400px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  margin: auto;
  .canvas{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .content{
    font-size: 30px;
    font-weight: bold;
  }
}

</style>